import React, { Component } from 'react';
import {NameContext} from './NameContext';
import Son from './component/son'
import UseState from './hook使用方法/useState.js';
class App extends Component {
  state={
    name:1,
    style:{
      width:"300px",
      height:'300px',
      background:'yellow'
    },
    show:false
   }
   UNSAFE_componentWillMount(){
    console.log('挂载之前');
   }
   componentDidMount(){
     console.log('挂载了');
   }
   UNSAFE_componentWillUpdate(){
    console.log('DOM更新之前');
  }
  componentDidUpdate(){
    console.log('DOM更新之后');
  }
   shouldComponentUpdate(p,s){
     console.log(p,s);
    console.log('决定数据是否更新')
    return true
   }



   add = ()=>{
    //  此处通过传入函数和值来改变父级中的参数
     this.setState((state)=>{
       return {name:state.name+1}
     })
   }
  render() { 
    return ( 
      <NameContext.Provider  value={ {name:this.state.name,add:this.add} }>
        <div>开始</div>
        <button onClick={()=>{
          this.setState({show:!this.state.show})
        }}>切换子组件</button>
       {this.state.show||<Son>66</Son>}
       {this.state.show||<UseState>测试useState</UseState>}
      </NameContext.Provider>
     );
  }

}
 
export default App;


